<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login</title>

<script type="text/javascript">
		var sendReq = getXmlHttpRequestObject();
		var receiveReq = getXmlHttpRequestObject();

		//Gets the browser specific XmlHttpRequest Object
		function getXmlHttpRequestObject() {
			if (window.XMLHttpRequest) {
				return new XMLHttpRequest();
			} else if(window.ActiveXObject) {
				return new ActiveXObject("Microsoft.XMLHTTP");
			} else {
				document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
			}
		}
				
		function sendLoginRequest() {
			if (sendReq.readyState == 4 || sendReq.readyState == 0) {
				sendReq.open("POST", '../library/game_room.php', true);
				sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sendReq.onreadystatechange = callBackSendLoginRequest; 
				var param = 'login=1';
				param += '&user=' + document.getElementById('user_id_txt').value;
				param += '&passwd=' + document.getElementById('passwd_txt').value;
				sendReq.send(param);
			}				
		}
		
		function callBackSendLoginRequest() {
			if (sendReq.readyState == 4) {
				var response = eval("(" + sendReq.responseText + ")");
				document.getElementById('login_status').innerHTML = response.status;
				
			}
		}
		
		function sendLogoutRequest() {
			if (sendReq.readyState == 4 || sendReq.readyState == 0) {
				sendReq.open("POST", '../library/game_room.php', true);
				sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sendReq.onreadystatechange = sendLogoutRequestCallBack; 
				var param = 'logout=1';
				sendReq.send(param);
			}				
		}
		
		function sendLogoutRequestCallBack() {
			if (sendReq.readyState == 4) {
				var response = eval("(" + sendReq.responseText + ")");
				document.getElementById('login_status').innerHTML = response.status;
				
			}
		}
		
		function sendSelectRoomRequest() {
			if (sendReq.readyState == 4 || sendReq.readyState == 0) {
				sendReq.open("POST", '../library/game_room.php', true);
				sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sendReq.onreadystatechange = sendSelectRoomRequestCallBack; 
				var param = 'select_room=1';
				param += '&room_id=' + document.getElementById('room_sel').value;
				sendReq.send(param);
			}				
		}
		
		function sendSelectRoomRequestCallBack() {
			if (sendReq.readyState == 4) {
				var response = eval("(" + sendReq.responseText + ")");
				if (response.success) {
					window.location = "waiting_room.html";
				} else {
					document.getElementById('select_room_status').innerHTML = response.status;
				}
			}
		}
	
	</script>

</head>
<body>
<h1>Login</h1>
<h4><div id="login_status"></div></h4>
<table border="1">
	<tr>
		<td width="95">User:</td>
		<td width="89"><label> <input type="text"
			name="user_id_txt" id="user_id_txt" value="peter" /> </label></td>
	</tr>
	<tr>
		<td>Password:</td>
		<td><label> <input type="password" name="passwd_txt"
			id="passwd_txt" value="sosad" /> </label></td>
	</tr>
	<tr>
		<td colspan="2"><label> <input type="submit"
			name="submit_btn" id="submit_btn" value="Submit" 
			onclick="javascript:sendLoginRequest();" /> </label>
		</td>
	</tr>
</table>

<br />
<a href="#" onclick="javascript:sendLogoutRequest();"> Logout </a> <br />

<h1>Select Room</h1>
<h4><div id="select_room_status"></div></h4>
<table border="1">
	<tr>
		<td>Game room:</td>
		<td><label> <select name="room_sel" id="room_sel">
			<option value="1">Room 1</option>
			<option value="2">Room 2</option>
		</select> </label></td>
	</tr>
	<tr>
		<td colspan="2"><label> <input type="submit"
			name="submit_btn" id="submit_btn" value="Submit" 
			onclick="javascript:sendSelectRoomRequest();" /> </label>
		</td>
	</tr>
</table>

</body>
</html>
